<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        div {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        input {
            margin-left: 10px;
        }

        #as {
            position: absolute;
            top: 6px;
            right: -137px;
            color: red;
        }

        #ps {
            position: absolute;
            top: 59px;
            right: -137px;
            color: red;
        }
    </style>
</head>
<body>
<div>
    <form action="${pageContext.request.contextPath}/register.do" method="post">
        <table>
            <tr>
                <td>用户名：</td>
                <td><label>
                    <input type="text" name="account" id="account" maxlength="15" size="30"
                           placeholder="请输入用户名">
                </label><span id="as"></span></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td>
                    <label for="email">
                        <input type="text" name="email" id="email" placeholder="请输入邮箱">
                    </label>
                    <span id="es"></span>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><label>
                    <input type="password" name="registerPassword" id="registerPassword" maxlength="20"
                           placeholder="请输入密码(不超过十位)">
                </label></td>
            </tr>
            <tr>
                <td></td>
                <td><label>
                    <input type="password" name="registerPassword2" id="registerPassword2" maxlength="20"
                           placeholder="请输入再次密码">
                </label><span id="ps"></span></td>
            </tr>
        </table>
        <p>请选择你要注册的账号类型：
            <label>
                <input type="radio" id="user" name="identity" value="1">用户
                <input type="radio" id="seller" name="identity" value="2">商家
            </label>
        </p>
        <input type="button" id="submit" value="注册" >
        <span id="message"></span>
        <a href="Login.jsp">返回</a>
    </form>
</div>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
    let account = document.getElementById('account');
    let registerPassword = document.getElementById("registerPassword");
    let password = document.getElementById('registerPassword2');
    let submit = document.getElementById("submit");
    let email = document.getElementById("email");
    let as = document.getElementById('as');
    let ps = document.getElementById('ps');
    let es = document.getElementById('es');
    let pat = /^((?![\\/:*?<>|'%@#&$^]).){1,20}$/;
    let pat2 = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    password.onblur = function () {
        if (this.value !== registerPassword.value) {
            ps.style.color = 'red';
            ps.innerHTML = '前后两次密码不一致';
            document.querySelector('#submit').dishabled = true;
        } else {
            ps.innerHTML = '';
            document.querySelector('#submit').dishabled = false;
        }
    }
    $(function () {
        $(account).on('blur', function () {
            if (!pat.test(this.value)) {
                as.style.color = 'red';
                as.innerHTML = '用户名格式不正确';
            } else {
                $.ajax({
                    url: "http://localhost:8080/user.do",
                    type: "post",
                    data: {
                        account: $("#account").val(),
                        method: 'registerJudge'
                    },
                    dataType: "text",
                    success: function (data) {
                        if (data === 'error') {
                            as.style.color = 'red';
                            as.innerHTML = '用户名已存在';
                        } else {
                            as.innerHTML = '';
                        }
                    }
                })
            }
        })
        $(email).on("blur", function () {
            if (!pat2.test(this.value)) {
                es.style.color = 'red';
                es.innerHTML = '邮箱格式不正确';
            } else {
                $.ajax({
                    url: "http://localhost:8080/user.do",
                    type: "post",
                    data: {
                        email: $("#email").val(),
                        method: 'registerJudge'
                    },
                    dataType: "text",
                    success: function (data) {
                        if (data === 'error') {
                            es.style.color = 'red';
                            es.innerHTML = '邮箱已注册';
                        } else {
                            es.innerHTML = '';
                        }
                    }
                })
            }
        })
        $(":button").on("click", function () {
            $.ajax({
                url: "http://localhost:8080/user.do",
                type: "post",
                data: {
                    account: $("#account").val(),
                    email: $("#email").val(),
                    registerPassword: $("#registerPassword").val(),
                    identity: $('input:radio:checked').val(),
                    method: 'register'
                },
                dataType: "text",
                success: function (data) {
                    if (data === "ok") {
                        alert('注册成功');
                        window.location.href = 'Login.jsp';
                    } else {
                        alert('注册失败');
                    }
                }
            });
        });
    });
</script>
</body>
</html>
